<template>
  <div class="app-container">
    <div class="page-header">
      <el-page-header @back="goBack" content="新增应收款明细" />
    </div>
    
    <el-card class="form-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据类型" prop="documentType">
              <el-select v-model="form.documentType" placeholder="请选择单据类型" style="width: 100%">
                <el-option label="销售出库" :value="1" />
                <el-option label="其他出库" :value="2" />
                <el-option label="退货出库" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库单号" prop="outboundNo">
              <el-input v-model="form.outboundNo" placeholder="请输入出库单号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据日期" prop="documentDate">
              <el-date-picker 
                v-model="form.documentDate" 
                type="date" 
                value-format="yyyy-MM-dd" 
                placeholder="请选择单据日期" 
                style="width: 100%" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="form.customerName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数量" prop="quantity">
              <el-input-number 
                v-model="form.quantity" 
                :min="0" 
                placeholder="请输入数量" 
                style="width: 100%" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择付款方式" style="width: 100%">
                <el-option label="现金" value="现金" />
                <el-option label="银行转账" value="银行转账" />
                <el-option label="支票" value="支票" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="税额" prop="taxAmount">
              <el-input 
                v-model.number="form.taxAmount" 
                placeholder="请输入税额" 
                type="number" 
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应收金额" prop="receivableAmount">
              <el-input 
                v-model.number="form.receivableAmount" 
                placeholder="请输入应收金额" 
                type="number" 
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="已收金额" prop="receivedAmount">
              <el-input 
                v-model.number="form.receivedAmount" 
                placeholder="请输入已收金额" 
                type="number" 
                @input="calculateOutstanding"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="未收金额" prop="outstandingAmount">
              <el-input 
                v-model.number="form.outstandingAmount" 
                placeholder="自动计算" 
                readonly 
                style="background-color: #f5f7fa"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款状态" prop="paymentStatus">
              <el-select v-model="form.paymentStatus" placeholder="请选择付款状态" style="width: 100%">
                                 <el-option label="未收款" value="未收款" />
                 <el-option label="部分收款" value="部分收款" />
                 <el-option label="已结清" value="已结清" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="备注" prop="remark">
          <el-input 
            v-model="form.remark" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入备注信息" 
          />
        </el-form-item>
        
        <el-form-item class="form-actions">
          <el-button type="primary" @click="submitForm" :loading="submitLoading">提交</el-button>
          <el-button @click="goBack">取消</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addReceivable } from "@/api/receivable/receivable"


export default {
  name: "ReceivableAdd",
  data() {
    return {
      submitLoading: false,
      form: {
        documentType: null,
        outboundNo: null,
        documentDate: null,
        customerName: null,
        quantity: null,
        paymentMethod: null,
        taxAmount: null,
        receivableAmount: null,
        receivedAmount: null,
        outstandingAmount: null,
        paymentStatus: null,
        remark: null
      },
      rules: {
        documentType: [
          { required: true, message: "单据类型不能为空", trigger: "change" }
        ],
        outboundNo: [
          { required: true, message: "出库单号不能为空", trigger: "blur" }
        ],
        documentDate: [
          { required: true, message: "单据日期不能为空", trigger: "blur" }
        ],
        customerName: [
          { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
        quantity: [
          { required: true, message: "数量不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "数量必须大于等于0", trigger: "blur" }
        ],
        paymentMethod: [
          { required: true, message: "付款方式不能为空", trigger: "change" }
        ],
        taxAmount: [
          { required: true, message: "税额不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "税额必须大于等于0", trigger: "blur" }
        ],
        receivableAmount: [
          { required: true, message: "应收金额不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "应收金额必须大于等于0", trigger: "blur" }
        ],
        receivedAmount: [
          { required: true, message: "已收金额不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "已收金额必须大于等于0", trigger: "blur" }
        ],
        paymentStatus: [
          { required: true, message: "付款状态不能为空", trigger: "change" }
        ]
      }
    }
  },
  methods: {
    // 计算未收金额
    calculateOutstanding() {
      const receivable = parseFloat(this.form.receivableAmount || 0)
      const received = parseFloat(this.form.receivedAmount || 0)
      this.form.outstandingAmount = Math.max(0, receivable - received)
      
      // 自动更新付款状态
      if (received === 0) {
        this.form.paymentStatus = '未收款'
              } else if (received >= receivable) {
          this.form.paymentStatus = '已结清'
        } else {
          this.form.paymentStatus = '部分收款'
        }
    },
    
    // 提交表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 验证已收金额不能超过应收金额
          if (parseFloat(this.form.receivedAmount) > parseFloat(this.form.receivableAmount)) {
            this.$message.error("已收金额不能超过应收金额")
            return
          }
          
          // 创建提交数据，排除自动计算的字段
          const submitData = {
            documentType: this.form.documentType,
            outboundNo: this.form.outboundNo,
            documentDate: this.form.documentDate,
            customerName: this.form.customerName,
            quantity: this.form.quantity,
            paymentMethod: this.form.paymentMethod,
            taxAmount: this.form.taxAmount,
            receivableAmount: this.form.receivableAmount,
            receivedAmount: this.form.receivedAmount,
            paymentStatus: this.form.paymentStatus,
            remark: this.form.remark
          }
          
          this.submitLoading = true
          addReceivable(submitData).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.submitLoading = false
            this.goBack()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    
    // 重置表单
    resetForm() {
      this.$refs["form"].resetFields()
      this.form = {
        documentType: null,
        outboundNo: null,
        documentDate: null,
        customerName: null,
        quantity: null,
        paymentMethod: null,
        taxAmount: null,
        receivableAmount: null,
        receivedAmount: null,
        outstandingAmount: null,
        paymentStatus: null,
        remark: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.form-card {
  .form-actions {
    margin-top: 30px;
    text-align: center;
    border-top: 1px solid #ebeef5;
    padding-top: 20px;
    
    .el-button {
      margin: 0 10px;
      min-width: 100px;
    }
  }
}

// 输入框样式
.el-input-group__prepend {
  background: #f0f4fa;
  color: #2980b9;
  font-weight: 600;
  border-color: #dbeafe;
}

// 只读输入框样式
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #606266;
}
</style> 